HTML

<section class="filter js-filter js-expand is-collapsed" aria-label='search filters'>
            
                <form class="js-form" id="form-filter" method="post" action="#">
            
                    <span class="filter__heading">Filter Results</span>
            
                    <button type="button" class="filter__toggle icon-chevron-red-circle-gray js-expand-toggle">
                        <span class="u-visuallyhidden">Toggle accordion</span>
                    </button>
            
                    <span class="filter__clear js-form-clear" tabindex="0">Clear</span>
            
                    <div class="filter__hr"></div>
            
                    <div class="filter-expand">
            
            
                        <div class="select-search js-select-search is-not-loaded" data-placeholder="Filter by Health Service" aria-labelledby="health-service" role="listbox">
                            <label class="input-label" for="health-service">Health Service</label>
                            <select class="select-search__select" id="health-service" name="health-service" style="width:100%" aria-label='health service filter' onchange="this.form.submit()">
                                <option value="Option 1">Ear, Nose & Throat (Otorhinolaryngology)</option>
                                <option value="Option 2">Option 2</option>
                                <option value="Option 3">Option 3</option>
                            </select>
                        </div>  <!-- .select-search -->
            
                        <div class="filter__input filter__input--inline js-form-validate-filter">
                            <label class="input-label" for="distance">Distance</label>
                            <span>Within</span>
                            <div class="select select--sm icon-triangle-red-s">
                                <select id="distance" name="distance" aria-label='distance filter'>
                                    <option value="" selected>Any Miles</option>
                                    <option value="1">1 Mile</option>
                                    <option value="5">5 Miles</option>
                                    <option value="10">10 Miles</option>
                                    <option value="25">25 Miles</option>
                                    <option value="50">50 Miles</option>
                                    <option value="100">100 Miles</option>
                                </select>
                            </div>
                            <label class="u-hidden" for="address">Address or ZIP</label>
                            <input class="input-text input-text--sm js-form-validate-item" type="text" id="address" name="address" placeholder="Address or ZIP" role='search' aria-label='address or zip code search'>
                            <input class="input-submit js-form-filter-submit" type="submit" value="Apply" id="filter-submit" disabled>
                        </div>
            
                        <div class="filter__location u-hidden" id="filter-location">
                            <span class="filter__location-icon icon-location"></span>
                            <a href="#" class="filter__location-link" id="filter-location-link">Use My Current Location</a>
                        </div>
            
                        <input type="hidden" name="lat" id="lat">
                        <input type="hidden" name="long" id="long">
            
                        <script>
                        var address;
            
                        document.getElementById('filter-location-link').addEventListener('click', function (event) {
                            event.preventDefault();
                            geolocate(true);
                        });
            
                        function getAddress(latitude, longitude, refresh) {
                            var request = new XMLHttpRequest(),
                                method = 'GET',
                                url = 'https://maps.googleapis.com/maps/api/geocode/json?key=AIzaSyBJG-OGHOP9hSb-OjsQDsQn-JLa1sXRuR0&latlng=' + latitude + ',' + longitude,
                                async = true;
            
                            request.open(method, url, async);
                            request.onreadystatechange = function () {
                                if (request.readyState === 4) {
                                    if (request.status === 200) {
                                        document.getElementById('lat').value = latitude;
                                        document.getElementById('long').value = longitude;
                                        document.getElementById('address').value = JSON.parse(request.responseText).results[0].formatted_address;
                                        document.getElementById('filter-submit').removeAttribute('disabled');
                                        if (document.getElementById('relevance')) {
                                            document.getElementById('relevance').value = 'Distance';
                                        }
                                        if (refresh && !document.getElementById('map')) {
                                            document.getElementById('form-filter').submit();
                                        }
                                    } else {
                                        console.error('An error has occured');
                                    }
                                }
                            };
                            request.send();
                        };
            
                        function geolocate(pageLoad) {
                            if (navigator.geolocation) {
                                navigator.geolocation.getCurrentPosition(function(position) {
                                    var geolocation = {
                                            lat: position.coords.latitude,
                                            lng: position.coords.longitude
                                        },
                                        circle = new google.maps.Circle({
                                            center: geolocation,
                                            radius: position.coords.accuracy
                                        });
            
                                    document.getElementById('filter-location').classList.remove('u-hidden');
                                    getAddress(geolocation.lat, geolocation.lng, pageLoad);
                                    address.setBounds(circle.getBounds());
                                });
                            }
                        }
            
                        function initAutocomplete() {
                            var isIE = /*@cc_on!@*/false || !!document.documentMode;
            
                            address = new google.maps.places.Autocomplete(document.getElementById('address'), {types: ['geocode']});
                            address.setFields(['address_component']);
            
                            if (!document.getElementById('lat').value && !document.getElementById('long').value) {
                                if (!isIE || (navigator.appVersion.indexOf('Windows NT 6.1') > -1)) {
                                    geolocate(false);
                                }
                            } else {
                                if (navigator.geolocation) {
                                    navigator.geolocation.getCurrentPosition(function() {
                                        document.getElementById('filter-location').classList.remove('u-hidden');
                                    });
                                }
                            }
            
                            google.maps.event.addListener(address, 'place_changed', function () {
                                var place = address.getPlace();
                                console.log("Get place");
                                document.getElementById('lat').value = place.geometry.location.lat();
                                document.getElementById('long').value = place.geometry.location.lng();
                                //alert("This function is working!");
                            });
            
            
                            if (document.getElementById('map')) {
                                initMap();
                                document.body.className += ' ' + 'has-map';
                            }
                        }
                        </script>
                    </div>
            
                </form>
            
            </section><!-- .filter -->